<!--
 * @Author: lsmi
 * @Date: 2021-06-08 20:33:28
 * @LastEditors: lsmi
 * @LastEditTime: 2021-07-21 21:28:14
 * @FilePath: \v2_play_js\src\views\About.vue
-->
<template>
  <div class="about">
    <div class="position-test">
      position-test
      <div class="use-position-div">
        <div class="pos">info position</div>
        <div class="info">title info</div>
      </div>
    </div>
    {{ $t("login") }}
    <img src="@/assets/logo.png" />
    <el-select v-model="value" placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <el-button @click="boolean = !boolean">list</el-button>
    <!-- v-outSide="handleClose" -->
    <div class="list" v-show="boolean" v-outSide="handleClose">
      <div v-for="(item, index) in options" :key="index">{{ item.label }}</div>
    </div>
    <!-- @swiper="onSwiper"
      @slideChange="onSlideChange" -->
    <!-- <swiper class="swiper" :options="swiperOptions">
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper> -->
    <solt1-comp>
      <div class="in-list">1</div>
    </solt1-comp>
    <accept-email theme="outline" size="36" fill="#333" :strokeWidth="3" />
    <api theme="outline" size="36" fill="#333" :strokeWidth="3" />
    <bluetooth theme="outline" size="36" fill="#333" :strokeWidth="3" />
    <div v-for="(item, index) in storeList" :key="index">
      {{ item.name }}
      id: {{ item.id }}
      <el-button size="mini" @click="editStoreList(item, index)"
        >edit</el-button
      >
    </div>
    <el-button type="primary" @click="drawer = true">open</el-button>
    <el-drawer title="我是标题" :visible.sync="drawer">
      <span :ref="getDrawerRefAction">我来啦!</span>
    </el-drawer>
    <!-- <el-scrollbar class="scroll">
      <div class="test-scroll">
        <div class="item" v-for="(item, index) in 20" :key="index">
          {{ item }}
        </div>
      </div>
    </el-scrollbar>
    <el-scrollbar class="scroll-h" vertical>
      <div class="test-scroll">
        <div class="item" v-for="(item, index) in 20" :key="index">
          {{ item }}
        </div>
      </div>
    </el-scrollbar> -->
  </div>
</template>
<script>
// import SwiperCore, { Pagination, Autoplay } from "swiper";
import Solt1Comp from "../components/mutilSlot/solt1.vue";
import { AcceptEmail, Api, Bluetooth } from "@icon-park/vue";
import { mapState, mapMutations } from "vuex";
const res = {
  code: 200,
  data: {
    list: [
      {
        title: "x",
        id: 1,
      },
    ],
    pageInfo: {
      total: 1,
      page: 1,
    },
  },
};
// SwiperCore.use([Pagination, Autoplay]);
export default {
  components: { Solt1Comp, AcceptEmail, Api, Bluetooth },
  data() {
    return {
      drawer: false,
      value: "",
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      boolean: false,
      swiperOptions: {
        loop: true,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: true,
        },
        pagination: {
          el: ".swiper-pagination",
          bulletActiveClass: "my-bullet-active",
          // 分页器隐藏时的类名。
          hiddenClass: "my-pagination-hidden",
        },
      },
      resData: {
        listData: {
          list: [],
          pageInfo: {},
        },
      },
      isList: [
        {
          title: "x",
          name: "name",
          id: 1,
        },
      ],
    };
  },
  watch: {},
  computed: {
    ...mapState({
      storeList: (state) => state.storeList,
    }),
  },
  mounted() {
    // console.log(this);
    setTimeout(() => {
      this.$i18n.locale = "en";
    }, 1000);
    // const list = res.data.list.map((t) => {
    //   return { ...t, name: t.title };
    // });
    // this.resData.listData.list = list;
    this.resData.listData = res.data;
    this.resData.listData.list.map((t) => {
      //
      // t.discountList = [];
      this.$set(t, "discountList", []);
      // 特性列表
      t.featureList = [];
      return t;
    });
    // this.isList.map((t) => {
    //   t.flag = false;
    // });
    this.setStoreList([
      {
        name: "name",
        title: "title",
      },
    ]);
  },
  methods: {
    ...mapMutations({
      setStoreList: "setStoreList",
      setUnitStoreList: "setUnitStoreList",
    }),
    getDrawerRefAction(el, a) {
      console.log(el, a, "aa");
    },
    handleClose() {
      this.boolean = false;
    },
    addDiscountList(item) {
      item.discountList.push("000");
      console.log(item, "item");
    },
    editStoreList(item, index) {
      this.$set(item, "id", 1);
      // this.setUnitStoreList({ index, data: { key: "id", value: 1 } });
    },
  },
};
</script>

<style lang="scss">
.my-bullet-active {
  background: red;
}
.my-pagination-hidden {
  background: salmon;
}
</style>
<style scoped lang="scss">
.about {
  width: 1200px;
}
.position-test {
  height: 500px;
  background: #abcdef;
  position: relative;
  .use-position-div {
    position: absolute;
    top: 20px;
    left: 20px;
    .pos {
      font-size: 24px;
      color: #ccc;
    }
  }
}
.swiper {
  border: 1px solid saddlebrown;
  height: 400px;
}
.scroll {
  width: 200px;
  .test-scroll {
    display: flex;
    .item {
      box-sizing: border-box;
      width: 40px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      display: inline-block;
      padding: 8px;
      border: 1px solid salmon;
      border-radius: 2px;
      margin: 4px;
    }
  }
}
.scroll-h {
  height: 600px;
  width: 600px;
  ::v-deep.el-scrollbar__wrap {
    overflow-x: hidden;
  }
  .test-scroll {
    .item {
      box-sizing: border-box;
      width: 40px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      display: block;
      padding: 8px;
      border: 1px solid salmon;
      border-radius: 2px;
      margin: 4px;
    }
  }
}
</style>
